<!doctype html>
<html>
    <head>
        <title>jsPlumb - state machine demonstration</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

        <link rel="stylesheet" href="node_modules/@jsplumb/browser-ui/css/jsplumbtoolkit.css">
        <link rel="stylesheet" href="../demo.css">
    </head>
    <body>

        <!-- content -->
        <div class="jtk-demo-main">
            <div class="jtk-demo-canvas canvas-wide statemachine-demo jtk-surface jtk-surface-nopan" id="canvas">
                <div class="w" id="opened">BEGIN
                    <div class="ep" action="begin"></div>
                </div>
                <div class="w" id="phone1">PHONE INTERVIEW 1
                    <div class="ep" action="phone1"></div>
                </div>
                <div class="w" id="phone2">PHONE INTERVIEW 2
                    <div class="ep" action="phone2"></div>
                </div>
                <div class="w" id="inperson">IN PERSON
                    <div class="ep" action="inperson"></div>
                </div>
                <div class="w" id="rejected">REJECTED
                    <div class="ep" action="rejected"></div>
                </div>
            </div>
            <div class="description">
                <h4>STATE MACHINE</h4>
                <p>Nodes are connected with the StateMachine connector.</p>
                <p>Endpoints are located with 'Continuous' anchors, which are anchors whose location is calculated based on
                    the location of all other connected elements, and which guarantee a unique endpoint per connection.
                </p>
                <p>Click and drag new Connections from the orange div in each element; the main elements in the UI are
                    configured to be Connection targets. You can drag from one of these divs onto its parent element to
                    create a 'loopback' connection. Each element supports up to 5 Connections.</p>
                <p>Click on a Connection to delete it.</p>
                <p>Double click on whitespace to add a new node</p>
            </div>
        </div>

        <!-- /content -->

        <script src="_build/demo.umd.js"></script>
    </body>
</html>
